<sf-item-wrap [id]="id"
              [schema]="schema"
              [ui]="ui"
              [showError]="showError"
              [error]="error"
              [showTitle]="schema.title">
  <ng-container [ngSwitch]="mode">

    <nz-year-picker *ngSwitchCase="'year'"
                    [nzDisabled]="disabled"
                    [nzSize]="ui.size"
                    [nzFormat]="displayFormat"
                    [(ngModel)]="displayValue"
                    (ngModelChange)="_change($event)"
                    [nzAllowClear]="i.allowClear"
                    [nzClassName]="ui.className"
                    [nzDisabledDate]="ui.disabledDate"
                    [nzLocale]="ui.locale"
                    [nzPlaceHolder]="ui.placeholder"
                    [nzPopupStyle]="ui.popupStyle"
                    [nzDropdownClassName]="ui.dropdownClassName"
                    (nzOnOpenChange)="_openChange($event)"
                    [nzRenderExtraFooter]="ui.renderExtraFooter"></nz-year-picker>

    <nz-month-picker *ngSwitchCase="'month'"
                     [nzDisabled]="disabled"
                     [nzSize]="ui.size"
                     [nzFormat]="displayFormat"
                     [(ngModel)]="displayValue"
                     (ngModelChange)="_change($event)"
                     [nzAllowClear]="i.allowClear"
                     [nzClassName]="ui.className"
                     [nzDisabledDate]="ui.disabledDate"
                     [nzLocale]="ui.locale"
                     [nzPlaceHolder]="ui.placeholder"
                     [nzPopupStyle]="ui.popupStyle"
                     [nzDropdownClassName]="ui.dropdownClassName"
                     (nzOnOpenChange)="_openChange($event)"
                     [nzRenderExtraFooter]="ui.renderExtraFooter"></nz-month-picker>

    <nz-week-picker *ngSwitchCase="'week'"
                    [nzDisabled]="disabled"
                    [nzSize]="ui.size"
                    [nzFormat]="displayFormat"
                    [(ngModel)]="displayValue"
                    (ngModelChange)="_change($event)"
                    [nzAllowClear]="i.allowClear"
                    [nzClassName]="ui.className"
                    [nzDisabledDate]="ui.disabledDate"
                    [nzLocale]="ui.locale"
                    [nzPlaceHolder]="ui.placeholder"
                    [nzPopupStyle]="ui.popupStyle"
                    [nzDropdownClassName]="ui.dropdownClassName"
                    (nzOnOpenChange)="_openChange($event)"></nz-week-picker>

    <nz-range-picker *ngSwitchCase="'range'"
                     [nzDisabled]="disabled"
                     [nzSize]="ui.size"
                     [nzFormat]="displayFormat"
                     [(ngModel)]="displayValue"
                     (ngModelChange)="_change($event)"
                     [nzAllowClear]="i.allowClear"
                     [nzClassName]="ui.className"
                     [nzDisabledDate]="ui.disabledDate"
                     [nzLocale]="ui.locale"
                     [nzPlaceHolder]="ui.placeholder"
                     [nzPopupStyle]="ui.popupStyle"
                     [nzDropdownClassName]="ui.dropdownClassName"
                     (nzOnOpenChange)="_openChange($event)"
                     [nzDisabledTime]="ui.disabledTime"
                     [nzRenderExtraFooter]="ui.renderExtraFooter"
                     [nzRanges]="ui.ranges"
                     [nzShowTime]="ui.showTime"
                     (nzOnOk)="_ok($event)"></nz-range-picker>

    <nz-date-picker *ngSwitchDefault
                    [nzDisabled]="disabled"
                    [nzSize]="ui.size"
                    [nzFormat]="displayFormat"
                    [(ngModel)]="displayValue"
                    (ngModelChange)="_change($event)"
                    [nzAllowClear]="i.allowClear"
                    [nzClassName]="ui.className"
                    [nzDisabledDate]="ui.disabledDate"
                    [nzLocale]="ui.locale"
                    [nzPlaceHolder]="ui.placeholder"
                    [nzPopupStyle]="ui.popupStyle"
                    [nzDropdownClassName]="ui.dropdownClassName"
                    (nzOnOpenChange)="_openChange($event)"
                    [nzDisabledTime]="ui.disabledTime"
                    [nzRenderExtraFooter]="ui.renderExtraFooter"
                    [nzShowTime]="ui.showTime"
                    [nzShowToday]="i.showToday"
                    (nzOnOk)="_ok($event)"></nz-date-picker>
  </ng-container>

</sf-item-wrap>
